<{extend name="Public:public" /}>

<{block name="title"}>路由<{/block}>

<{block name="content"}> 
<div class="content guide with-sidebar routing-guide">
  
    
      <div id="ad">
  <!-- <script
    async
    type="text/javascript"
    src="//cdn.carbonads.com/carbon.js?serve=CKYIK2QU&placement=vuejsorg"
    id="_carbonads_js">
  </script> -->
  <a href="https://studio.qcloud.coding.net/campaign/favorite-plugins/?utm_source=vue.js&amp;utm_content=ad1116" target="_blank">
    <img src="/images/coding-net-ad.jpg">
  </a>
</div>

    
  
  
    <h1>路由</h1>
  
  
    <h2 id="官方路由"><a href="#官方路由" class="headerlink" title="官方路由" data-scroll="">官方路由</a></h2><p>对于大多数单页面应用，都推荐使用官方支持的 <a href="https://github.com/vuejs/vue-router" target="_blank" rel="noopener">vue-router 库</a>。更多细节可以看 <a href="https://router.vuejs.org/" target="_blank" rel="noopener">vue-router 文档</a>。</p>
<h2 id="从零开始简单的路由"><a href="#从零开始简单的路由" class="headerlink" title="从零开始简单的路由" data-scroll="">从零开始简单的路由</a></h2><p>如果只需要非常简单的路由而不需要引入整个路由库，可以动态渲染一个页面级的组件像这样：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> NotFound = { <span class="attr">template</span>: <span class="string">'&lt;p&gt;Page not found&lt;/p&gt;'</span> }</span><br><span class="line"><span class="keyword">const</span> Home = { <span class="attr">template</span>: <span class="string">'&lt;p&gt;home page&lt;/p&gt;'</span> }</span><br><span class="line"><span class="keyword">const</span> About = { <span class="attr">template</span>: <span class="string">'&lt;p&gt;about page&lt;/p&gt;'</span> }</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> routes = {</span><br><span class="line">  <span class="string">'/'</span>: Home,</span><br><span class="line">  <span class="string">'/about'</span>: About</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line">  el: <span class="string">'#app'</span>,</span><br><span class="line">  data: {</span><br><span class="line">    currentRoute: <span class="built_in">window</span>.location.pathname</span><br><span class="line">  },</span><br><span class="line">  computed: {</span><br><span class="line">    ViewComponent () {</span><br><span class="line">      <span class="keyword">return</span> routes[<span class="keyword">this</span>.currentRoute] || NotFound</span><br><span class="line">    }</span><br><span class="line">  },</span><br><span class="line">  render (h) { <span class="keyword">return</span> h(<span class="keyword">this</span>.ViewComponent) }</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<p>结合 HTML5 History API，你可以建立一个非常基本但功能齐全的客户端路由器。可以直接看<a href="https://github.com/chrisvfritz/vue-2.0-simple-routing-example" target="_blank" rel="noopener">实例应用</a></p>
<h2 id="整合第三方路由"><a href="#整合第三方路由" class="headerlink" title="整合第三方路由" data-scroll="">整合第三方路由</a></h2><p>如果有非常喜欢的第三方路由，如 <a href="https://github.com/visionmedia/page.js" target="_blank" rel="noopener">Page.js</a> 或者 <a href="https://github.com/flatiron/director" target="_blank" rel="noopener">Director</a>，整合<a href="https://github.com/chrisvfritz/vue-2.0-simple-routing-example/compare/master...pagejs" target="_blank" rel="noopener">很简单</a>。这有个用了 Page.js 的<a href="https://github.com/chrisvfritz/vue-2.0-simple-routing-example/tree/pagejs" target="_blank" rel="noopener">复杂示例</a>。</p>

  
  
    <div class="guide-links">
      
      
        <span>← <a href="/v2/guide/typescript.html">TypeScript 支持</a></span>
      
      
      
        <span style="float: right;"><a href="/v2/guide/state-management.html">状态管理</a> →</span>
      
    </div>
  
  <div class="footer">
      <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
<div class="bsa-cpc"></div>
<script>
  (function(){
    if(typeof _bsa !== 'undefined' && _bsa) {
    _bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', {
      target: '.bsa-cpc',
      align: 'horizontal',
      disable_css: 'true'
    });
      }
  })();
</script>

    发现错误？想参与编辑？
    <a href="https://github.com/vuejs/cn.vuejs.org/blob/master/src/v2/guide/routing.md" target="_blank">
      在 GitHub 上编辑此页！
    </a>
  </div>
</div>
<{/block}>
